<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="#" name="form">
    <input type="text" name="advName">
    <input type="text" name="advOrder">
    <input type="file" name="advFile" id="file" multiple accept="image/png,image/gif,image/jpeg,image/webp">
    <br>
    <img src="" alt="" id="pre" width="100px">
    <button id="btn">提交</button>
  </form>
  <script>
    const oFile = document.querySelector('#file')
    const oPre = document.querySelector('#pre')
    const oBtn = document.querySelector('#btn')

    oBtn.onclick = function(e){
      e.preventDefault()
      const myFormData = new FormData(document.form)
      //new一个FormData的实例化对象,参数是需要获取数据的表格
      myFormData.get('advName')  //这个方法整体就是输入的内容 1或者传入的图片
    }

    //表单上有一个onchange属性,是表单改变并失去焦点时触发
    oFile.onchange =  function(){
      //当文件上传完成后会有一个files属性,是上传完成的所有文件的信息
      console.log(this.files[0]);
      //FileReader是js提供异步读取文件的类,实例化以后得到一个对象,提供很多方法读取文件
      const reader = new FileReader()
      //把文件转码成base64格式
      reader.readAsDataURL(this.files[0])
      //转码完成后会触发onload事件
      reader.onload = function(e){
        oPre.src = e.target.result
      }

    }

    /*//使用FormData收集表单数据
    oBtn.onclick = function (e) {
      e.preventDefault()
      const myFormData = new FormData(document.form)
      console.log(myFormData.get('advName'));
      console.log(myFormData.get('advOrder'));
      console.log(myFormData.get('advFile'));
    }

    //用来做图片预览
    oFile.onchange = function () {
      //在文件上传成功后,在当前的input对象上有一个files的属性,包含了上传所有文件信息组成的数组
      console.log(this.files[0]);
      //FileReader是js提供的异步读取文件的类,实例化以后得到一个对象,提供了很多方法可以读取文件
      const reader = new FileReader()
      reader.readAsDataURL(this.files[0])
      //当reader读取完以后会触发onload事件
      reader.onload = function (e) {
        console.log(e.target.result);
        oPre.src = e.target.result
      }
    }
    */

    /*
    // oBtn.onclick = function(e){
    //   e.preventDefault()
    //   //使用FormData来收集某个表单的数据
    //   const myFormData = new FormData(document.form)
    //   console.log(myFormData.get('advName'));
    //   console.log(myFormData.get('advOrder'));
    //   console.log(myFormData.get('advFile'));
    // }

    //FormData获取表单的数据
    //创建FormData的实例,参数是表单
    //获取都是字符串
    oBtn.onclick = function (e) {
      e.preventDefault()
      const myFormData = new FormData(document.form)
      console.log(myFormData.get('advName'));
      console.log(myFormData.get('advOrder'));
      console.log(myFormData.get('advFile'));
    }

    // oFile.onchange=function(){

    //   console.log(this.files[0]);
    // }
    //onchange是表单改变且失去焦点触发
    //input是表单改变触发
    oFile.onchange = function (e) {
      // console.log(this.files[0]);
      // 表单改变且失去焦点后,当前的input属性有个files属性,包含了上传的所有文件信息组成的数组
      this.files[0] //是上传的第一个文件
      // FileReader是js提供的异步读取文件的类,和input的file配合使用,实例化后得到一个对象,提供了很多方法可以读取文件 
      const reader = new FileReader()
      reader.readAsDataURL(this.files[0])
      // reader.readAsDataURL(this.files[0]);
      reader.onload = function (e) {
        // console.log(oPre.src = e.target.result);
        oPre.src = e.target.result
      }
    }
*/
  </script>
</body>

</html>